<template>
  <div class="bg">
    <div id="LoginBox">
      <form id="app" class="form">
        <div id="BoxHeader">
          <label class="label">iSchool萌团子</label>
        </div>
        <br>
        <span class="span">账号：</span>
        <input type="text" name="zhanghao" id="idNumber" v-model:value="username">
        <br>
        <br>
        <span class="span">密码：</span>
        <input type="password" name="password" id="password" v-model:value="password">
        <button type="button" class="btn btn-default" @click="login()">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { myGet, myPost } from "../utils/request.js";
import { url } from "../utils/api.js";

// import Index from "./index.vue";

export default {
  data() {
    return {
      username: null,
      password: null
    };
  },
  methods: {
    login() {
      var that = this;
      console.log(this.Api.url.login);
      let url    = this.Api.url.login;
      let params = {
        username: that.username,
        password: that.password
      };
      this.http.post(url, params).then(res => {
        // console.log("登录", res);
        var data = res;
        //验证成功
        var userInfo = {
          username : data.username,
          type     : data.type,
          id       : data.id,
          token    : data.token,
          isDeleted: data.isDeleted
        };
        console.log("isDeleted", userInfo.isDeleted);
        localStorage.setItem("user_name", userInfo.username);
        localStorage.setItem("user_type", userInfo.type);
        localStorage.setItem("user_id", userInfo.id);
        localStorage.setItem("token", userInfo.token);
        // console.log("全局用户信息", localStorage.getItem("token"));
        if (userInfo.isDeleted == "0") {
          this.$router.push({ path: "/index/knowledgeBox" });
        } else if (userInfo.isDeleted == "1") {
          that.$Message.error("您已被封号!");
        }
      });
    }
  },
  mounted() {
    localStorage.removeItem("user_name");
    localStorage.removeItem("user_type");
    localStorage.removeItem("user_id");
    localStorage.removeItem("token");
  }
};
</script>

<style>
body {
  margin         : 0px;
  padding        : 0px;
  list-style     : none;
  text-decoration: none;
}

.bg {
  background           : url(../images/loginBg.jpg) no-repeat;
  background-size      : cover;
  background-attachment: fixed;
  height               : 100vh;
  width                : 100vw;
}

#LoginBox {
  position        : absolute;
  padding         : 25px 10px 10px 10px;
  margin          : 100px auto;
  margin-left     : 40%;
  height          : 380px;
  width           : 300px;
  background-color: white;
  border-radius   : 12px;
  opacity         : 0.8;
  animation       : moveBox 2.5s;
}
@keyframes moveBox /* Safari and Chrome */ {
  0% {
    top    : -50px;
    opacity: 0.5;
  }
  100% {
    top    : 0px;
    opacity: 0.8;
  }
}
#BoxHeader {
  position        : relative;
  height          : 40px;
  border-radius   : 10px;
  background-color: pink;
  text-align      : center;
  color           : white;
  font-size       : 21px;
  margin-bottom   : 20px;
}
#idNumber,
#password {
  height : 30px;
  width  : 285px;
  padding: 3px;
  margin : 2px 0px;
  opacity: 0.9;
}

.form {
  position: relative;
}
.label {
  position  : absolute;
  top       : 6px;
  left      : 65px;
  color     : white;
  text-align: center;
}
.span {
  font-size : 17px;
  margin-top: 10px;
}
.btn-default {
  position        : absolute;
  top             : 300px;
  left            : 110px;
  height          : 35px;
  width           : 70px;
  background-color: pink;
  color           : white;
  border          : none;
  border-radius   : 5px;
}
.alertMsg {
  display: inline-block;
  color  : red;
}
</style>
